<template>
  <div class="userBody">
<allocRole ref="allocRole"/>
    <div class="search">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span> <i class="el-icon-search"></i> 筛选搜索</span>
          <el-button size="small" @click="searchFormRestart()">重置</el-button>
          <el-button type="primary" size="small" @click="getDataList()"
            >查询搜索</el-button
          >
        </div>
        <el-form ref="form" :model="searchForm" label-width="80px">
          <el-form-item label="输入搜索:">
            <el-input
              v-model="searchForm.userName"
              placeholder="账号/姓名"
            ></el-input>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <div class="addUser">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span> <i class="el-icon-tickets"></i> 数据列表</span>
          <el-button size="small" @click="userAdd()">添加</el-button>
        </div>
      </el-card>

      <!-- 添加用户的表达数输入 -->
 <el-dialog
        :title="isEdit ? '编辑用户' : '添加用户'"
        :visible.sync="dialogVisible"
        width="38%"
      >
        <el-form ref="userForm" :model="userForm" label-width="80px">
          <el-form-item label="账号:">
            <el-input
              v-model="userForm.username"
              placeholder="请输入账号"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="邮箱:">
            <el-input
              v-model="userForm.email"
              placeholder="请输入邮箱"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="密码:">
            <el-input
              v-model="userForm.password"
              placeholder="请输入密码"
              show-password
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="备注:" class="desc">
            <el-input type="textarea" v-model="userForm.nickName"></el-input>
          </el-form-item>
          <el-form-item label="是否启用:">
            <el-radio-group v-model="userForm.status">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="registerCancel()" size="small">取 消</el-button>
          <el-button type="primary" @click="registerDetermine()" size="small"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
    <div class="userList">
      <el-card class="box-card">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          :header-cell-style="{ textAlign: 'center'}"
          :cell-style="{ textAlign: 'center' }"
        >
          <el-table-column prop="adminId" label="ID" width="70px">
          </el-table-column>
          <el-table-column prop="username" label="账号"> </el-table-column>
          <el-table-column prop="nickName" label="姓名"> </el-table-column>
          <el-table-column prop="email" label="邮箱"> </el-table-column>
          <el-table-column prop="createTime" label="添加时间">
          </el-table-column>
          <!-- <el-table-column prop="loginTime" label="最后登录"> </el-table-column> -->
          <el-table-column prop="isEnable" label="是否启用">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                @change="isStatus()"
                :active-value="1"
                :inactive-value="0"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="operation" label="操作">
            <template slot-scope="scope">
              <div>
                <el-button type="text" @click="userRoleUpdate(scope.row)">分配角色</el-button>
                <el-button type="text" @click="userUpdate(scope.row)"
                  >编辑</el-button
                >
                <el-button type="text" @click="userDelete(scope.row.adminId)"
                  >删除</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="1"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import user_api from "@/api/user";
import { Message, MessageBox } from "element-ui";
import allocRole from "./components/allocRole.vue"
const defaultAdmin = {
  adminId: null,
  nickName: "",
  username: "",
  email: "",
  password: "",
  status: '1',
};

const defaultSearchFrom = {
  userName: "",
};
export default {
  data() {
    return {
      input: "", //搜索的条件模糊查询
      total: 9, //总条数
      dialogVisible: false, //添加的按钮出现的表单
      pageSize: 5,
      pageNum: 1,
      isEdit: false,
      tableData: [],
      currentPage: 1,
      searchForm: Object.assign({},defaultSearchFrom),
      //添加表单时的数据
      userForm: Object.assign({}, defaultAdmin),
    };
  },
  created() {
    this.getDataList();
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.getDataList();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getDataList();
    },
    searchFormRestart(){
      this.searchForm  = Object.assign({},defaultSearchFrom)
      this.getDataList()
    },
    getDataList() {
      user_api
        .list(this.searchForm["userName"], this.pageSize, this.pageNum)
        .then((res) => {
          let data = res.data;
          this.total = res.data.total;
          // data.list.forEach((item) => {
          //   item["status"] = item["status"] === 1 ? true : false;
          // });
          this.tableData = data.list;
        });
    },
    userDelete(id) {
      MessageBox.confirm("确定要删除该记录吗?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        user_api.delete(id).then((res) => {
          Message({
            message: "删除成功",
            type: "success",
            duration: 5 * 1000,
          });
          this.tableData = this.tableData.filter((item) => {
            return item.adminId != id;
          });
        });
      });
    },
    userUpdate(row) {
      this.dialogVisible = true;
      this.isEdit = true;
       this.userForm = Object.assign({}, row);
    },
    userAdd() {
      this.dialogVisible = true;
      this.isEdit = false;
      this.userForm = Object.assign({}, defaultAdmin);
    },
    registerCancel() {
      this.dialogVisible = false;
    },
    registerDetermine() {
      MessageBox.confirm("确定要进行该操作吗?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        if (this.isEdit) {
          user_api.update(this.userForm.adminId, this.userForm).then((res) => {
            Message({
              message: "修改成功",
              type: "success",
              duration: 5 * 1000,
            });
            this.getDataList();
            this.dialogVisible = false;
          });
        } else {
          user_api.register(this.userForm).then((res) => {
            Message({
              message: "注册成功",
              type: "success",
              duration: 5 * 1000,
            });
            this.getDataList();
            this.dialogVisible = false;
          });
        }
      });
    },
    userRoleUpdate(row){
      this.$refs.allocRole.singRoleUpdate(row.adminId)
    },
    isStatus() {
      console.log("我我的");
    },
  },
  components:{
    allocRole
  }
};
</script>
<style lang="scss" scoped>
.userBody {
  height: 91.3%;
  width: 100%;
  .search {
    height: 130px;
    line-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
    .box-card {
      width: 95%;
      height: 124px;
      /deep/ .el-card__header {
        border: none;
        button {
          float: right;
          margin-left: 15px;
          margin-right: 5px;
          margin-top: 15px;
        }
        .clearfix {
          margin-top: -13px;
        }
      }
      /deep/ .el-card__body {
        position: relative;
        bottom: 35px;
        left: 50px;
        :first-child {
          height: 50px;
          width: 330px;
          p {
            width: 140px;
          }
          .el-input {
            width: 190px;
            height: 32px;
            .el-input__inner {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
  .addUser {
    height: 130px;
    line-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -12px;
    .box-card {
      width: 95%;
      height: 60.5px;
      /deep/ .el-card__header {
        border: none;
        .clearfix {
          position: relative;
          bottom: 12.5px;
        }
        button {
          float: right;
          margin-left: 15px;
          margin-right: 5px;
          margin-top: 15px;
        }
      }
    }
    /deep/ .el-form {
      width: 80%;
      padding-left: 55px;
      .el-form-item,
      .el-form-item__label,
      .el-form-item__content,
      .el-input,
      .el-input__inner {
        height: 32px;
        width: 250px;
      }
      .desc {
        height: 110px;
        .el-form-item__label,
        .el-form-item__content,
        .el-input,
        .el-textarea,
        .el-textarea__inner {
          height: 110px;
        }
      }
    }
  }
  .userList {
    line-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -12px;
    .box-card {
      width: 95%;
      /deep/ .el-card__header {
        border: none;
        .clearfix {
          position: relative;
          bottom: 12.5px;
        }
        button {
          position: relative;
          //top: 6px;
          left: 620px;
        }
      }
      /deep/ .el-card__body {
        .el-table__header tr,
        .el-table__header th {
          padding: 0;
          height: 48px;
        }
        .el-table__body tr,
        .el-table__body td {
          padding: 0;
          height: 50px;
        }
        .block {
          float: right;
          margin-top: 10px;
        }
      }
    }
  }
}
</style>
